import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { observer } from 'mobx-react-lite';
import { Ionicons } from '@expo/vector-icons';
import { RootStackParamList, useStore } from '@/route/Route';
import { HomeHeader } from './HomeHeader';
import { HomeNavigator } from './HomeNavigator';
import { StackNavigationProp } from '@react-navigation/stack';
import { ArcFab } from '@/components';
import { action } from 'mobx';
import { Nav } from '@/modules';

export const HomePage = observer(() => {
  const { userStore } = useStore();

  const quickActions = [
    {
      id: '1',
      title: '添加费用',
      icon: 'add-circle',
      color: '#0ea5e9',
      actionType: 'fuel',
      onPress: () => {
        // 跳转到添加费用页面
      },
    },
    {
      id: '2',
      title: '费用统计',
      icon: 'analytics',
      color: '#10b981',
      actionType: 'repair',
      onPress: () => {
        // 跳转到费用统计页面
      },
    },
    {
      id: '3',
      title: '保养提醒',
      icon: 'construct',
      color: '#f59e0b',
      actionType: 'maintenance',
      onPress: () => {
        // 跳转到保养管理页面
      },
    },
    {
      id: '4',
      title: '数据导出',
      icon: 'download',
      color: '#8b5cf6',
      actionType: 'car_wash',
      onPress: () => {
        // 数据导出功能
      },
    },
  ];

  const recentExpenses = [
    {
      id: '1',
      title: '加油',
      amount: 300,
      date: '2024-01-15',
      category: 'fuel',
    },
    {
      id: '2',
      title: '保养',
      amount: 800,
      date: '2024-01-10',
      category: 'maintenance',
    },
    {
      id: '3',
      title: '洗车',
      amount: 50,
      date: '2024-01-08',
      category: 'cleaning',
    },
  ];

  const onQuickActionsClick = (
    type: 'fuel' | 'repair' | 'maintenance' | 'car_wash'
  ) => {
    console.log(type);
    Nav.push('FormPage', { type });
    // navigation.navigate('FormPage', { type });
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        style={styles.scrollView}
        showsVerticalScrollIndicator={false}
      >
        {/* Header */}
        <HomeNavigator
          carName={'宝马X3'}
          subtitle="今天也要好好管理费用哦"
          onDidClick={type => {
            console.log(type);
            if (type === 'address') {
              // navigation.navigate('Address');
            } else if (type === 'message') {
              navigation.navigate('MessageList');
            } else if (type === 'car') {
              // navigation.navigate('Car');
            }
          }}
        />

        <HomeHeader />
        {/* Quick Actions */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>快捷操作</Text>
          <View style={styles.quickActions}>
            {quickActions.map(action => (
              <TouchableOpacity
                key={action.id}
                style={styles.actionCard}
                onPress={() => onQuickActionsClick('fuel')}
              >
                <View
                  style={[
                    styles.actionIcon,
                    { backgroundColor: action.color + '20' },
                  ]}
                >
                  <Ionicons
                    name={action.icon as any}
                    size={24}
                    color={action.color}
                  />
                </View>
                <Text style={styles.actionTitle}>{action.title}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>

        {/* Recent Expenses */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>最近费用</Text>
            <TouchableOpacity>
              <Text style={styles.seeAllText}>查看全部</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.expensesList}>
            {recentExpenses.map(expense => (
              <View key={expense.id} style={styles.expenseItem}>
                <View style={styles.expenseInfo}>
                  <Text style={styles.expenseTitle}>{expense.title}</Text>
                  <Text style={styles.expenseDate}>{expense.date}</Text>
                </View>
                <Text style={styles.expenseAmount}>¥{expense.amount}</Text>
              </View>
            ))}
          </View>
        </View>

        {/* Statistics */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>本月统计</Text>
          <View style={styles.statistics}>
            <View style={styles.statCard}>
              <Text style={styles.statValue}>¥1,250</Text>
              <Text style={styles.statLabel}>总支出</Text>
            </View>
            <View style={styles.statCard}>
              <Text style={styles.statValue}>8</Text>
              <Text style={styles.statLabel}>记录数</Text>
            </View>
            <View style={styles.statCard}>
              <Text style={styles.statValue}>¥156</Text>
              <Text style={styles.statLabel}>日均</Text>
            </View>
          </View>
        </View>
        <ArcFab />
      </ScrollView>
    </SafeAreaView>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8fafc',
  },
  scrollView: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 20,
    backgroundColor: '#ffffff',
  },
  greeting: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1e293b',
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 16,
    color: '#64748b',
  },
  notificationButton: {
    padding: 8,
  },
  section: {
    marginTop: 20,
    paddingHorizontal: 20,
  },
  sectionHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1e293b',
  },
  seeAllText: {
    fontSize: 14,
    color: '#0ea5e9',
    fontWeight: '500',
  },
  quickActions: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  actionCard: {
    flex: 1,
    backgroundColor: '#ffffff',
    padding: 16,
    borderRadius: 12,
    alignItems: 'center',
    marginHorizontal: 4,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  actionIcon: {
    width: 48,
    height: 48,
    borderRadius: 24,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 8,
  },
  actionTitle: {
    fontSize: 12,
    color: '#64748b',
    textAlign: 'center',
  },
  expensesList: {
    backgroundColor: '#ffffff',
    borderRadius: 12,
    overflow: 'hidden',
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  expenseItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f1f5f9',
  },
  expenseInfo: {
    flex: 1,
  },
  expenseTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#1e293b',
    marginBottom: 4,
  },
  expenseDate: {
    fontSize: 14,
    color: '#94a3b8',
  },
  expenseAmount: {
    fontSize: 16,
    fontWeight: '600',
    color: '#1e293b',
  },
  statistics: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  statCard: {
    flex: 1,
    backgroundColor: '#ffffff',
    padding: 16,
    borderRadius: 12,
    alignItems: 'center',
    marginHorizontal: 4,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  statValue: {
    fontSize: 20,
    fontWeight: '700',
    color: '#1e293b',
    marginBottom: 4,
  },
  statLabel: {
    fontSize: 12,
    color: '#64748b',
  },
});
